<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>moo</title>
<script type="text/javascript" src="mootools1.2.js"></script>
<!-- 
<script type="text/javascript" src="http://niceproduce.com/lynt/moo/mootools.v1.00.js"></script>
 -->
	<script type="text/javascript" src="multiple.open.accordion.js"></script>
	<style type="text/css" media="screen">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				font-family: Verdana, Sans;
				font-size: 12px;
			}
			table{
				width: 400px;
			}
			a, h1{
				font-weight: bold;
			}
			a{
				color: #429400;
			}
			h1{
				color: #e0e0e0;
			}
			img{
				border: 0px;
			}
			.dragTD{
				background: #333;
			}
			.dragHandle{
				cursor: pointer;
				background: url('http://niceproduce.com/lynt/moo/iconDragDrop.gif') no-repeat top left;
				height: 43px;
				width: 44px;
			}
			.arrowImageRight, .arrowImageDown{
				margin-top: 2px;
				cursor: pointer;
				float: right;
			}
			.arrowImageRight{
				background: url('http://niceproduce.com/lynt/moo/spilldownRight.gif') no-repeat;
				height: 9px;
				width: 5px;
			}
			.arrowImageDown{
				margin-top: 3px;
				background: url('http://niceproduce.com/lynt/moo/spilldownDown.gif') no-repeat;
				height: 5px;
				width: 9px;
			}.
			.content{
				background: #eee
			}
			.information{
				padding: 10px;
				font-face: Arial;
			}
			.White, .Grey{
				border: 1px black solid;
				padding: 5px;
			}
			.White{
				border-top: 0px;
				background: #fff;
			}
			.Grey{
				background: #e0e0e0;
				border-top: 0px;
			}
	</style>
	<style type="text/css">
ul#order {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 600px;

}
ul#order li {
	float:left;
}
.handle {
	width:200px;
	background-color: #eee;
	margin: 0;
	padding: 10px 0;
	cursor: move;
}
#s1 {background-color: #FF0000}
#s2 {background-color: #00CC00}
#s3 {background-color: #0033FF}
#s4 {background-color: #9933FF}
#s5 {background-color: #FFFF00}
#s6 {background-color: #FF6600}
</style>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			// Creates an array for our TD backgrounds. When we drag and drop a row, we need to make sure the background colour stays in order
			var tdBackgroundClassArray = ['White','Grey'];
			// Initialise the background colours of the div by hitting our function
			colorCorrect();
			// Create the sortables
			var mySort = new Sortables($('sortableList'), {
				handles: $$('div.dragHandle'), limit: 100,
				onComplete: function(el){
					// Once the user has dropped the div, run our colorCorrection function
					colorCorrect();
				}
			});
			
			
			var mySort2 = new Sortables($('order'), {
				initialize: function(){
					var step = 0;
					this.elements.each(function(element, i){
						var color = [step, 82, 87].hsbToRgb();
						element.setStyle('background-color', color);
						step = step + 35;
						//element.setStyle('height', $random(40, 100));
					});
				}
			 
			});
			
			var mySort3 =  new Sortables($('SortableExample'), {
				handles: $$('#SortableExample li')
				});
			
			// This function loops through all the divs specified and changes their background according to their order in the sortable
			function colorCorrect(){
				// Initialize our starting variable
				var setID = 1;
				// Loop through the divs
				$$('td.content').each(function(el,i){
					// change the chart order number
					parent.$$('span.chartNumber')[i].setHTML(setID+".")
					// Mod function to determine what position we are in the loop
					classtoAdd = setID % 2;
					// Default the classtoRemove variable to 1
					classtoRemove = 1;
					// Changed it based on our mod result
					if(classtoAdd == 1) classtoRemove = 0
					// Change the divs
					el.removeClass(tdBackgroundClassArray[classtoRemove]).addClass(tdBackgroundClassArray[classtoAdd]);
					// Add to the starting variable
					setID++;
				});
			}
			
			var myToggler = $$('div.arrow_drop');
			// Create the accordian
			new MultipleOpenAccordion(myToggler, $$('div.information'), {
				openAll: false, transition: Fx.Transitions.sineOut, display: 0,
				onActive: function(myToggler){
						myToggler.removeClass('arrowImageRight').addClass('arrowImageDown');
					},
				onBackground: function(myToggler){
						myToggler.removeClass('arrowImageDown').addClass('arrowImageRight');
					}
				});
		});
	</script>

</head>
<body>
	<div style="padding: 20px;">
		<div style="margin-bottom: 40px;">
			<h1>Made with</h1>
			<a href="http://mootools.net"><img src="http://mootools.net/assets/images/mootools.gif" /></a>
		</div>
		<div id="sortableList" style="width: 600px;">
			<div class="sort">
				<table cellspacing="0">
					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title A</strong><br />Section Subtitle
								<div style="clear: both;"></div>

								<div class="information">
									<a href="#">Link</a><br />
									<a href="#">Another Link</a>
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title B</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title C</strong><br />Section Subtitle
								<div style="clear: both;"></div>
									<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title D</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title E</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title F</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title G</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
			<div class="sort">
				<table cellspacing="0">

					<tr>
						<td class="content">
							<div class="box_title">
								<div class="arrow_drop arrowImageRight"></div>
								<span class="chartNumber commonLeftFloat">#.</span>
								<strong>Section Title H</strong><br />Section Subtitle
								<div style="clear: both;"></div>
								<div class="information">

									<a href="#">Link</a><br />
									<a href="#">Another Link</a><br />
									<br /><br />
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mi leo, porttitor i...
									<br /><br />
									<a href="#">More Links</a><br />
									<a href="#">Even More Links</a>

								</div>
							</div>
						</td>
						<td class="dragTD" valign="top"><div class="dragHandle"></div></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
<ul id="order">
<li id="s1" class="handle">s1</li>
<li id="s2" class="handle">s2</li>
<li id="s3" class="handle">s3</li>
<li id="s4" class="handle">s4</li>
<li id="s5" class="handle">s5</li>
<li id="s6" class="handle">s6</li>
</ul>

<div id="SortableExample">
 
	<ul><li id="item_1">
	<div id="paragraph1">
	<table width="150" border="1">
	  <tr>
		<td>This is item one content</td>
	    <td>Click to move </td>
	  </tr>
	</table>
	</div>
	</li></ul>
 
	<ul><li id="item_2">
	<div id="paragraph2">
	<table width="150" border="1">
	  <tr>
		<td>This is item two content</td>
	  </tr>
	</table>
	</div>	</li></ul>
 
	<ul><li id="item_3">
	<div id="paragraph3">
	<table width="150" border="1">
	  <tr>
		<td>This is item three content</td>
	  </tr>
	</table>
	</div></li></ul>
 
</div>
</body>
</html>